<template>
  <dl class="mine-h5-popup-radio" :class="{'h5-popup-radio-small': size === 'small'}" v-bind="$attrs">
    <dd :class="{'active': active === nav.active}" v-for="(nav, index) in lists" :key="nav.value" @click="handlerChangeRadio(nav, index)">{{nav.label}}</dd>
  </dl>
</template>

<script setup lang="ts" name="ZH5Radio">
import { computed } from '@vue/reactivity';

const emits = defineEmits(['change', 'update:active', 'update:value']);
const props = defineProps({
  toggle: {
    type: [Boolean, Number],
    default: false
  },
  value: {
    type: [Number, String],
    default: ""
  },
  navs: {
    type: <any>Array,
    default: []
  },
  active: {
    type: [Number, String],
    default: 1
  },
  size: {
    type: String,
    default: 'default'
  },
});

const lists = computed(()=>{
  let filter = props.navs.map((im:any, index:any)=>{
    return {
      ...im,
      index: index + 1
    }
  });
  let res = [];
  if(props.toggle === true){
    res = filter.filter((im:any)=>im.index < 7);
  }else if(props.toggle === false){
    res = filter;
  }
  return res;
});


const handlerChangeRadio = (nav: any, index: number) => {
  emits('change', {
    nav, index
  });
  emits('update:active', nav.active);
  emits('update:value', nav.active);
}

defineExpose({
});
</script>

<style lang="scss" scoped>
.mine-h5-popup-radio{
  width: 100%;
  // display: flex;
  // justify-content: space-between;
  // flex-wrap: wrap;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: var(--rem-1);
  grid-column-gap: var(--rem-20);
  &.h5-popup-radio-small{
    dd{
      height: var(--rem-40);
    }
  }
  dd{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1.5px solid var(--border-color);
    border-radius: var(--rem-10);
    height: var(--rem-50);
    font-size: var(--rem-13);
    margin-bottom: var(--rem-10);
    &.active{
      background: var(--z-bg-btn);
      color: white;
    }
  }
}

</style>
